<template>
  <a-modal v-model:open="visible" :maskClosable="false" v-bind="$attrs" @cancel="handleClosed" :width="520" class="modal">
    <div class="ant-modal-header">
      <div class="ant-modal-title">
        <div class="new-version">
          <span style="font-size: 17px; font-weight: normal">{{ title }}</span>
          <img class="file-icon" :src="linkImg" />
        </div>
      </div>
    </div>

    <div class="ant-modal-body">
      <div class="file-form" style="margin-top: 20px">
        <div class="file-item">
          <div class="file-item-label">文件名</div>
          <div class="file-item-content"
            ><a-input
              ref="linkNameInputRef"
              type="text"
              v-model:value="formData.fileName"
              class="ant-input"
              style="width: 90%"
              @focus="handleLinkNameInputFocus"
            />
          </div>
        </div>
        <div class="file-item">
          <div class="file-item-label">添加说明</div>
          <div class="file-item-content">
            <a-input placeholder="http://" type="text" v-model:value="formData.url" class="ant-input" style="width: 90%" />
          </div>
        </div>
      </div>
    </div>

    <template #footer>
      <a-button @click="handleClosed">取 消</a-button>
      <a-button type="primary" @click="handleOk">{{ isUpdate ? '保 存' : '创 建' }}</a-button>
    </template>
  </a-modal>
</template>
<script lang="ts">
  import { defineComponent, ref, reactive, nextTick } from 'vue';
  import { saveOrUpdate } from '../files.api';
  import { message } from 'ant-design-vue';
  import linkImg from '/@/assets/images/link.png';

  export default defineComponent({
    name: 'FileLinkAddModal',
    components: {},
    emits: ['success', 'closed'],
    setup(props, { emit }) {
      //弹窗显隐标记
      const visible = ref(false);
      //标题
      const title = ref('');
      //文件尾缀
      const suffix = '.url';
      //是否更新
      const isUpdate = ref(false);
      const linkNameInputRef = ref();
      //表单提交
      const formData = reactive({
        id: '',
        fileName: '',
        parentId: '',
        url: '',
      });

      //显示modal
      function showAddModal(parentId) {
        isUpdate.value = false;
        title.value = '添加链接';
        visible.value = true;
        formData.parentId = parentId;
        formData.fileName = '';
        formData.url = '';
        nextTick(() => {
          linkNameInputRef.value.focus();
        });
      }

      //显示modal
      function showUpateModal(record) {
        isUpdate.value = true;
        title.value = '编辑链接';
        visible.value = true;
        formData.parentId = record.parentId;
        formData.id = record.id;
        let d = record.fileName.length - suffix.length;
        if (d >= 0 && record.fileName.lastIndexOf(suffix) == d) {
          formData.fileName = record.fileName.substring(0, d);
        }
        formData.url = record.url;
        nextTick(() => {
          linkNameInputRef.value.focus();
        });
      }

      /**
       * 表格-新建文件夹-输入框失获得焦点事件
       */
      async function handleLinkNameInputFocus(e) {
        e.target.select();
      }

      function handleClosed() {
        visible.value = false;
        emit('closed');
      }

      async function handleOk() {
        if (!formData.fileName) {
          message.warn('文件名名称不能为空');
          return;
        }
        if (!formData.url) {
          message.warn('文件路径不能为空');
          return;
        }
        if (isUpdate.value) {
          let params = reactive({
            id: formData.id,
            fileName: formData.fileName + suffix,
            url: formData.url,
          });
          await saveOrUpdate(params, true);
        } else {
          let params = reactive({
            isDel: '0',
            enableDown: '1',
            enableUpdate: '1',
            fileName: formData.fileName + suffix,
            fileType: 'other',
            isFolder: '0',
            isRootFolder: '0',
            parentId: formData.parentId,
            storeType: 'manage',
            url: formData.url,
          });
          await saveOrUpdate(params, false);
        }

        visible.value = false;
        emit('success');
      }

      return {
        linkNameInputRef,
        isUpdate,
        visible,
        title,
        formData,
        linkImg,
        showAddModal,
        showUpateModal,
        handleClosed,
        handleOk,
        handleLinkNameInputFocus,
      };
    },
  });
</script>

<style lang="less" scoped>
  @import '../less/FileLink';
</style>
